<template>
  <el-header style="margin-bottom: 40px">
    <TopBar
    />
  </el-header>
  <div class="container">
    <div class="container-top">
      <div class="tag-contain">任务详情</div>
      <div class="context-container">
        <div class="task-name-container">{{ assignments.taskName }}</div>
        <div class="color-text-container">
          <div class="time-rang-container">
            任务起止时间：{{ assignments.timeRang }}
          </div>
          <div class="process-container">
            完成度：{{ assignments.process }}%
          </div>
        </div>
        <div class="task-description-container">{{ assignments.taskDescription }}</div>
      </div>
    </div>
    <CommentSection :post-add-comment-form="postAddCommentForm" :task-id="taskId">

    </CommentSection>
  </div>

</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import {defineComponent} from "vue";
import TopBar from "@/components/topBar.vue";
import CommentSection from "@/components/commentSection.vue"
import {useRoute, useRouter} from "vue-router";

const router = useRouter()
import {getMessage} from "@/api/task/task.js"
import {ElMessage} from "element-plus";


const route = useRoute();
// 接收通过路由跳转传过来的资讯ID，默认变为字符串
const taskId = Number(route.query.id);
const assignments = ref({
  taskName: "",
  taskDescription: "",
  taskStartTime: "",
  taskEndTime: "",
  timeRang: "",
  process: 50
})
const postAddCommentForm = reactive({
  comment: "",
  taskId: Number(taskId),
  commentType: 1,
  rootCommentId: null,
  parentId: null,
  replyComment: "",
});

onMounted(async () => {
  const res = await getMessage(route.query.id)
  if (res.data.code === 200) {
    assignments.value = {...res.data.result}
    assignments.value.timeRang = (assignments.value.taskStartTime?.replace(/-/g, "/") || "") +
        " " +
        (assignments.value.taskEndTime?.replace(/-/g, "/") || "");
    ElMessage.success('获取成功')
  } else {
    ElMessage.error('获取失败')
  }
})
</script>

<style scoped>
.container-top {
  position: relative;
  width: 1200px;
  height: 170px;
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 12px;
  font-weight: 400;
}

.tag-contain {
  position: absolute;
  top: 0;
  left: 0;
  background: #31ccd2;
  color: #fff;
  font-size: 16px;
  width: 120px;
  border-bottom-right-radius: 4px;
  text-align: center;
  padding: 8px;
  height: 40px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
}

.task-description-container {
  margin-top: 10px;
}

.task-name-container {
  font: inherit;
  font-weight: 400;
  vertical-align: baseline;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 20px;
}

.time-rang-container {
  font-size: 14px;
  color: #4285f4;
  background-color: #ecf3fe;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
  width: 400px;
  height: 30px;
  line-height: 30px;
}

:deep(.comments) {
  width: 1200px;
}

.context-container {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
}

.color-text-container {
  display: flex;
  flex-direction: row;
  justify-items: center;
  align-items: center;
  margin-top: 10px;
}

.process-container {
  margin-left: 20px;
  font-size: 14px;
  color: #77787a;
  background-color: #ecf3fe;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
</style>